<template>
  <div style="margin-top: 50px" class="detail-container">
    <el-card class="form-container" shadow="never">
    <el-steps :active="3" align-center>
      <el-step title="填写物品信息"></el-step>
      <el-step title="填写物品详实信息"></el-step>
      <el-step title="确认物品信息并提交"></el-step>
    </el-steps>
    <div style="margin-top: 50px">
      <svg-icon icon-class="marker" style="color:  #2178cf"></svg-icon>
      <span class="font-small">物品封面</span>

    </div>
    <div style="text-align:center">
      <el-image :src="image"
                fit="cover" style="width:300px;hight:300px">
      </el-image>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #2178cf"></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">物品名称</el-col>
        <el-col :span="6" class="table-cell-title">物品类别</el-col>
        <el-col :span="6" class="table-cell-title">物品品牌</el-col>
        <el-col :span="6" class="table-cell-title">出售价格</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell"></el-col>
        <el-col :span="6" class="table-cell"></el-col>
        <el-col :span="6" class="table-cell"></el-col>
        <el-col :span="6" class="table-cell"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="table-cell-title">物品简介</el-col>

        <el-col :span="6" class="table-cell-title">原始购买时间</el-col>
        <el-col :span="6" class="table-cell-title">创建时间</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="table-cell"></el-col>

        <el-col :span="6" class="table-cell"></el-col>
        <el-col :span="6" class="table-cell"></el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="table-cell-title">物品描述</el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="table-cell"></el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #2178cf"></svg-icon>
      <span class="font-small">物品相册</span>
    </div>

    <div style="text-align: center">
      <el-button size="medium" @click="handlePrev">上一步，填写物品详实信息</el-button>
      <el-button type="primary" size="medium" >确认信息并提交</el-button>
    </div>
    </el-card>
  </div>
</template>

<script>
    export default {

        data() {
            return {
                image: 'https://online-edu2020.oss-cn-beijing.aliyuncs.com/2020/12/12/58268775305249b08c52601df6dd3e0f01.jpg',
                //所有专题列表
                subjectList: [],
                //专题左右标题
                subjectTitles: ['待选择', '已选择'],
                //所有专题列表
                prefrenceAreaList: [],
                //专题左右标题
                prefrenceAreaTitles: ['待选择', '已选择']
            };
        },
        created() {

        },


        methods: {
            handlePrev() {
                this.$emit('prevStep')
            },
            filterMethod(query, item) {
                return item.label.indexOf(query) > -1;
            },
            getSubjectList() {
                fetchSubjectList().then(response => {
                    let list = response.data;
                    for (let i = 0; i < list.length; i++) {
                        this.subjectList.push({
                            label: list[i].title,
                            key: list[i].id
                        });
                    }
                });
            },
            getPrefrenceAreaList() {
                fetchPrefrenceAreaList().then(response=>{
                    let list = response.data;
                    for (let i = 0; i < list.length; i++) {
                        this.prefrenceAreaList.push({
                            label: list[i].name,
                            key: list[i].id
                        });
                    }
                });
            },
            handlePrev(){
                //this.$emit('prevStep')
            },
            handleFinishCommit(){
                //this.$emit('finishCommit',this.isEdit);
            }
        }
    }
</script>

<style scoped>
  .detail-container {
    width: 95%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }
  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .form-container {
    width: 1000px;
    margin-left: 200px;
  }
</style>
